<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造器</title>
    <!-- 1.引入本地资源-->
    <script src="../js/vue-dev.js"></script>
    <!-- 2.引入外部资源-->
    <!--<script src="https://unpkg.com/vue"></script>-->
</head>

<body>
    <!--


    -->

    <script>
        //1、每个 Vue 实例都会代理其 varData 对象里所有的属性
        //2、设置属性也会影响到原始数据（双向的影响），如varData.a=2 则vm.data.a的值改为2
        var varData = {a:1};
        var vm = new Vue({
            data:varData,
        })
        alert("varData.a="+varData.a+";vm.data.a="+vm.$data.a);
        alert("varData.a和vm.data.a的全等于比较:"+(varData.a===vm.$data.a));
        //3、注意只有这些 被代理（varData） 的属性是响应的，
        // 也就是说值的任何改变都是触发视图的重新渲染

        //4、如果在 实例创建之后 添加新的属性到实例上，它不会触发视图更新。
        //以下这种方式是不会被代理的.
//        var vm = new Vue({
//            data:varData,
//        })
//        var varData = {a:1};

        //5、除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。
        // 这些属性与方法都有前缀 $，以便与代理的 data 属性区分。
//        var data = { a: 1 }
//        var vm = new Vue({
//            el: '#example',
//            data: data
//        })
//        vm.$data === data // -> true
//        vm.$el === document.getElementById('example') // -> true
//        // $watch 是一个实例方法
//        vm.$watch('a', function (newVal, oldVal) {
//            // 这个回调将在 `vm.a`  改变后调用
//        })
        //6、注意，不要在实例属性或者回调函数中使用箭头函数；
        //因为箭头函数绑定父级上下文，
        //所以 this 不会像预想的一样是 Vue 实例，
        //而且 this.myMethod 是未被定义的。

    </script>

</body>

</html>